<style lang="scss" scoped>
.role {
  height: 100%;
  background-color: #f0f0f2;

  .role-list {
    padding-top: 0.44rem;
  }
}
</style>

<template>
    <div class="role">
        <div class="topbar">
            <span class="leftbtn" @click="goback"><Icon type="ios-arrow-back"></Icon></span>
            <span class="centertitle">角色列表</span>
            <span class="rightbtn" @click="addRole">新增</span>    
        </div>     
        <div class="role-list">
            <el-table :data="roleList" @row-click="dblclick" >
              <el-table-column  label="角色" prop="roleName"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { sampleData } from "api/index.js";
export default {
    data(){
        return {
            roleList:[]
        }
    },
    methods: {
        goback(){
            this.$router.push('/index')
        },
        addRole(){
            this.$router.push('/role')
            this.$store.state.agentOperation="add";
        },
        dblclick(row){
            this.$store.state.agentOperation="edit";
            this.$router.push({path:'role',query:{roleId:row.roleId}})
        },
        getRoleList(){
            let obj={}
            sampleData.getRoleList(obj).then(res=>{
                if (res.code == 0 || res.code == 200) {
                    this.roleList=res.list;
                }else{
                    this.$Message.error(res.msg)
                }               
            }).catch(error=>{
                this.$Message.error(error)
            })
        }
    },
    mounted() {
        this.getRoleList()
    },
}
</script>


